<template>
    
    <div class="log-box">
        <ComHeader title="设置查询" leftArrow='true' />
        <div class="content">
            <div class="info-name flex-display flex-center-align">
                设置名称：<input type="text" placeholder="请设置名称" class="flex-num-one" v-model="file_name"/>
            </div>
            <div class="info-cond flex-display flex-display-column">
                <span class="info-cond__tit">查询条件</span>
                <div class="info-cond__msg flex-num-one" v-if="list.length">
                    <div class="flex-display flex-center-align msg_item" v-for="(item, index) in list" :key="index" @click="fnSelectLog(item,index)" :class="{'border-select': item.select}">
                        <img src="../../../static/img/sel.png" v-if="!item.select">
                        <img src="../../../static/img/sel-active.png" v-else>
                        {{item[index]}}
                    </div>   
                </div>
            </div>

            <div class="info-cond__ret flex-display flex-display-column">
                <span class="info-cond__t">指定快递单号</span>
                <div class="form-group flex-display flex-center-align">
                    <span>快递单号：</span>
                    <select class="flex-num-one" @change="selectItem">
                        <option>请选择</option>
                        <option v-for="(item, index) in list" :key="index">{{item[index]}}</option>
                    </select>
                </div>
            </div>
            <div class="info-cond_re flex-display flex-display-column m-t-20">
                <span class="info-cond__tit">查询结果显示</span>
                <div class="info-cond__msg flex-num-one" v-if="selectList.length">
                    <div class="flex-display flex-center-align msg_item" v-for="(item, index) in selectList" :key="index" :class="{'border-select': item.select}">
                        <img src="../../../static/img/sel.png" v-if="!item.select">
                        <img src="../../../static/img/sel-active.png" v-else>
                        {{item[index]}}
                    </div>   
                </div>
            </div>
            <div class="logBtn" @click="fnSubmitData">完成</div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import ComHeader from '@/common/ComHeader'
import {Toast  } from 'mint-ui';
export default {
    data() {
        return {
            list: [],
            selectList: [],
            query_target: '',
            file_name: '',
            query_target_second: '',
            selectValue: '',
        }
    },
    created() {
        console.log(this.$route.query.id)
        this.fnGetTableList()
        this.fnTableList()
    },
    methods: {
        selectItem(e) {
            this.list.forEach((item , index) => {
                if(item[index] == e.target.value && item.select) {
                    Toast({
                        message: '查询条件不能和快递单号一致，请重新选择',
                        duration:2000
                    });
                    e.target.value = '请选择'
                    return
                }
            })
            
            this.selectValue = e.target.value || e.srcElement.value 
            this.selectList.forEach((item, index) => {
                item.select = item[index] == this.selectValue ? true : false
            })
        },
        fnSelectLog(cel,indexs) {
            this.selectList.forEach((item , index) => {
                if(item.select && item[index] == cel[indexs]) {
                    Toast({
                        message: '查询条件不能和快递单号一致，请重新选择',
                        duration:2000
                    });
                    e.target.value = '请选择'
                    return
                }
            })
            
            let selectNum = this.list.filter((item) => { return item.select })
            if(selectNum.length >= 2 && !cel.select) {
                Toast({
                    message: '最多选择两个查询条件',
                    duration:2000
                });
                return
            }
             cel.select = !cel.select
        },
        fnGetTableList() {
            axios.get('/choujiang/v1/User_File/', {
                params: {
                    file_id: this.$route.query.id
                }
            }).then(err => {

            }).catch(res => {
                if(res.status === 200) {
                    res.data.data.forEach(element => {
                        element.select = false;
                    });
                    this.list = res.data.data
                }
            })
        },
        fnTableList() {
            axios.get('/choujiang/v1/User_File/',{
                params: {
                    file_id: this.$route.query.id
                }
            }).then(err => {

            }).catch(res => {
                if(res.status === 200) {
                    res.data.data.forEach(element => {
                        element.select = false;
                        this.selectList.push(element)
                    });
                }
            })
        },
        fnSubmitData() {
            let tar1 = ''
            let tar2 = ''
            let selectNum = this.list.filter((item) => { return item.select })
            console.log(selectNum)
            if(selectNum.length >= 2) {
                for(let k in selectNum[1]) {
                    if(k != 'select') {
                        tar2 = selectNum[1][k]
                    }
                }
                for(let j in selectNum[0]) {
                    if(j != 'select') {
                        tar1 = selectNum[0][j]
                    }
                }
            }
            if(selectNum.length == 1) {
                tar1 = this.filter(this.list)
            }
            let ult = this.filter(this.selectList)

            if(!tar1) {
                Toast({
                    message: '请选择查询条件',
                    duration:1000
                });
                return
            }
            if(!ult) {
                Toast({
                    message: '指定快递单号',
                    duration:1000
                });
                return
            }
            if(!this.file_name) {
                Toast({
                    message: '请设置名称',
                    duration:1000
                });
                return
            }
            axios.get('/choujiang/v1/User_File/', {
                params: {
                    file_id: this.$route.query.id,
                    target1: tar1,
                    target2: tar2,
                    result: ult,
                    file_name: this.file_name
                }
            }).then(res => {
                console.log(res)
            }).catch(result => {
                console.log(result)
                if(result.status === 200 ) {
                    this.$router.push("/importResult?QR_code="+result.data.QR_code+'&url='+this.$route.query.id+'&file_name='+this.file_name); 
                }
            })
        },
        filter(list) {
            let value = '' 
            list.forEach((item,index) => {
                console.log(item)
                if(item.select) {
                    value = item[index]
                }
            })
            return value
            
        }
    },
    components: {
        Toast,
        ComHeader
    }
}
</script>
<style lang="scss" scoped>

    .form-group {
        margin-top: 10px;
        height: 45px;
        box-sizing: border-box;
        padding: 0 10px;
        span{
            color: #a94442;
        }
        select {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            outline: none;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
    }
    .info-name {
        width: 100%;
        padding: 10px 0px;
        box-sizing: border-box;
        height: 1.5rem;
        input {
            height: 100%;
            display: block;
            border-radius: 3px;
            padding-left: 10px;
            border: 1px solid #e5e5e5;
        }
    }
    .m-t-20 {
        margin-top: 10px;
    }
    .log-box {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .msg_item {
        width: 100%;
        height: 0.8rem;
        box-sizing: border-box;
        padding: 0 10px;
        border-radius: 5px;
        border: 1px solid #e5e5e5;
        margin-bottom: 5px;
        img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
    }

    .content {
       position: relative;
       top:1.5rem;
       padding: 10px;
       box-sizing: border-box;
    }

    .info-cond {
        width: 100%;
        border-radius: 5px;
        height: auto;
        background: #fff;
        border: 1px solid #e5e5e5;
        .info-cond__tit{
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 0.4rem;
            color: #25b5fe;
            text-align: center;
        }
    }
    .info-cond_re {
        width: 100%;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #e5e5e5;
        .info-cond__tit{
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 0.4rem;
            color: #25b5fe;
            text-align: center;
        }
    }
    .info-cond__msg {
        overflow: auto;
        box-sizing: border-box;
        padding: 0 10px;
    }
    .border-select {
        border: 1px solid #25b5fe;
    }

    .info-cond__ret {
        margin-top: 10px;
         width: 100%;
        border-radius: 5px;
        height: 3rem;
        background: #fff;
        border: 1px solid #e5e5e5;
    }

    .info-cond__t {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 0.4rem;
        color: #25b5fe;
        text-align: center;
    }

    .logBtn {
        width: 100%;
        height: 45px;
        line-height: 45px;
        background: #25b5fe;
        text-align: center;
        margin-top: 10px;
        color: #fff;
        border-radius: 5px;
    }
</style>


